<template>
  <section class="dialog-form-container">
      <el-form
        ref="form"
        v-loading="loading"
        :model="form"
        :rules="rules"
        :label-width="labelWidth"
        label-suffix="："
        label-position="top"
      >
        <template v-for="(item, index) in formItems">
          <transition :key="index" name="fade" mode="out-in" >
            <!-- 是否隐藏 -->
            <div v-if="hiddenFn(item,form)" class="form-item-wrap">
              <!-- 放置文字 -->
              <div class="place-txt"
              v-if="item.type === 'place'">
                <span>{{item.text}}</span>
              </div>
              <!-- 注意文字 -->
              <div class="careful-txt"
              v-if="item.type === 'careful'">
                <label class="careful-label"
                v-if="item.label"
                >{{item.label}}</label>
                <span>{{item.text}}</span>
              </div>

              <!-- 选择上传 -->
              <el-form-item
                :key="index"
                v-bind="item"
                :label="item.label"
                v-else-if="item.type === 'upload'"
              >
                <el-input v-model="form[item.prop]" :type="item.type||''" size="small" v-bind="item">
                  <div slot="append">
                    <el-upload
                      :style="'width:'+(item.width||'68px')"
                        ref="upload"
                        multiple
                        :show-file-list="false"
                        :file-list="form.fileList"
                        :action="item.action||''"
                        :on-remove="handleRemove"
                        :on-change="beforeUpload"
                        :auto-upload="false">
                      <el-button  v-if="item.appendText"
                      :style="'width:'+(item.width||'68px')"
                      slot="trigger" size="small" class="jee-bg-light-important">{{item.appendText}}</el-button>
                      </el-upload>
                  </div>
                </el-input>
                <div v-if="item.explain" class="gray">{{item.explain}}</div>
              </el-form-item>
               <!-- 图片裁剪上传 -->
              <el-form-item
                :key="index"
                :prop="item.prop"
                :label="item.label"
                v-else-if="item.type === 'imageUpload'"
              >
                <jee-image-upload
                  v-bind="item.option"
                  :defaultUrl="form[item.urlProp]"
                  v-model="form[item.prop]"
                ></jee-image-upload>
              </el-form-item>
               <!-- 多图上传 -->
              <el-form-item
                :key="index"
                :prop="item.prop"
                :label="item.label"
                v-else-if="item.type === 'multiImageUpload'"
              >
                <jee-multi-image-upload
                  v-bind="item.option"
                  v-model="form[item.prop]"
                ></jee-multi-image-upload>
              </el-form-item>
               <!-- 视频上传 -->
              <el-form-item
                :key="index"
                :prop="item.prop"
                :label="item.label"
                v-else-if="item.type === 'videoUpload'"
              >
                <jee-video-upload
                  v-bind="item.option"
                  v-model="form[item.prop]"
                ></jee-video-upload>
              </el-form-item>
               <!-- 音频上传 -->
              <el-form-item
                :key="index"
                :prop="item.prop"
                :label="item.label"
                v-else-if="item.type === 'audioUpload'"
              >
                <jee-video-upload
                  v-bind="item.option"
                  v-model="form[item.prop]"
                  iconClass='yinpin'
                  compType="audio"
                ></jee-video-upload>
              </el-form-item>
               <!-- 文件上传 -->
              <el-form-item
                :key="index"
                :prop="item.prop"
                :label="item.label"
                v-else-if="item.type === 'fileUpload'"
              >
                <jee-file-upload
                  v-bind="item.option"
                  v-model="form[item.prop]"
                ></jee-file-upload>
              </el-form-item>
              <!-- 自定义，通过插槽传入 -->
              <el-form-item
                :key="index"
                :label="item.label"
                :prop="item.prop"
                :class="item.class"
                v-else-if="item.type === 'slot'"
              >
                <slot :name="item.prop" :form="form" :item="item"></slot>
                <div v-if="item.explain" :style="item.explainWidth?'width:'+item.explainWidth:'width:414px'" class="gray">{{item.explain}}</div>
              </el-form-item>
              <!-- 按钮（上传） -->
              <el-form-item
                :key="index"
                v-bind="item"
                :label="item.label"
                v-else-if="item.type === 'btn'"
              >
              <div v-if="item.btnType === 'Upload'" >
                <el-upload
                  :style="'width:'+(item.width||'68px')"
                  ref="uploadBtn"
                  :file-list="item.fileList"
                  :show-file-list="true"
                  :action="item.action||''"
                  :before-remove="handleBeforeRemove"
                  :on-change="handleBtnUpload"
                  :auto-upload="false">
                    <el-button
                      type="primary" size="small" class="jee-bg-light-important">{{item.btnText}}</el-button>
                </el-upload>
                <div
                  class="upload-btn-txt">
                  <span>{{item.name}}</span>
                </div>
              </div>
              <el-button
                v-else
                type="primary" size="small"
                @click="handleBtn(item,$event)"
              >{{item.btnText}}</el-button>
                <div v-if="item.explain" class="gray">{{item.explain}}</div>
              </el-form-item>
            </div>
          </transition>
        </template>

      </el-form>
  </section>
</template>

<script>
import JeeImageUpload from "./JeeImageUpload";
import JeeMultiImageUpload from "./JeeMultiImageUpload";
import JeeVideoUpload from "./JeeVideoUpload";
import JeeFileUpload from "./JeeFileUpload";
export default {
  name: 'dialogForm',
  components: {JeeFileUpload, JeeVideoUpload, JeeMultiImageUpload, JeeImageUpload},
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    formItems: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: '166px'
    },
    options: {
      type: Object,
      default: () => ({})
    },
    showWordLimit: {
      type: Boolean,
      default: false
    }
  },
  created() {

  },
  data () {
    return {
      orgTag: []
    }
  },
  methods: {
    // 树形多选框
    getCheckId (data, item) {
      var i = this.form[item.prop].indexOf(data.id)
      if (i > -1) {
        this.form[item.prop].splice(i, 1)
        this.orgTag.splice(i, 1)
      } else {
        this.form[item.prop].push(data.id)
        this.orgTag.push(data)
      }
    },
    handleTagClose (tag, item) {
      var i = this.form[item.prop].indexOf(tag.id)
      this.form[item.prop].splice(i, 1)
      this.orgTag.splice(i, 1)
    },
    getOrgKey (ids, item) {
      // console.log(item.tree.map(v => ids.indexOf(v.id) > -1))
      // return item.find(v => ids.indexOf(v.id) > -1)
    },
    // 树形单选框
    getRadioId (data, item) {
      this.form[item.prop] = data.id
    },
    handleCancel () {
      this.$refs.form.resetFields()
    },
    handleAppend (e) {
      this.$emit('handleAppend', e)
    },
    handleBtns (e) {
      this.$emit('handleBtns', e)
    },
    handleBtn (data, e) {
      this.$emit(`handleBtn${data.btnType}`, data, e)
    },
    handleRemove (file) {
      this.$emit('handleRemove', file)
    },
    handleBeforeRemove (file) {
      this.$emit('handleBeforeRemove', file)
      return this.$confirm('确定删除' + file.name + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    handleBtnUpload (file, fileList) {
      var type = this.uploadType(file)
      this.$emit('handleBtnUpload', file, type)
    },
    // 上传-选择文件
    beforeUpload (file, fileList) {
      var type = this.uploadType(file)
      var list = fileList.map(v => {
        v.type = this.uploadType(v)
        return v
      })
      this.$emit('beforeUpload', file, type, list)
    },
    // 上传-文件类型
    uploadType (file) {
      var type = file.raw.type
      var i = type.indexOf('/')
      var suffix = type.slice(0, i)
      var fileType = ''
      // File文件 Flash Flash Image图片 Media视频 Audio音频 为空则默认Image
      switch (suffix) {
        case 'image':
          fileType = ''
          break
        case 'text':
          fileType = 'File'
          break
        case 'application':
          fileType = 'File'
          break
        case 'video':
          fileType = 'Media'
          break
        case 'audio':
          fileType = 'Audio'
          break
        default:
          fileType = ''
          break
      }
      return fileType
    },
    handleChange (e) {
      this.$emit('handleChange', e)
    },
    // 添加组织数据到列表
    handleAdd (e, item) {
      const data = Object.assign({}, this.form)
      this.$emit(`handleAdd${item.addType}`, data, item)
    },
    handleConfirm (btn) {

      const data = Object.assign({}, this.form)

      this.$refs.form.validate(valid => {
        if (valid) {
          if (!btn.keepAlive) {
            this.dialogVisible = false
          }

          if (btn.type === 'Submit') {
            this.$emit('handleConfirm', data, btn)
            this.$refs.form.resetFields()
          } else {
            if (!btn.keepAlive) {
              this.dialogVisible = false
            }
            this.$emit(`handleConfirm${btn.type}`, data, btn)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCheckKeys (data) {
      var ids = this.$refs['startTree' + data.prop][0].getCheckedKeys()
      this.form[data.prop] = ids
    },
    handleCheckChange (data, node) {
      this.$emit(`getTheNod`, node.checkedKeys)
    },
    // 隐藏表单
    hiddenFn (item, form) {
      var status = true
      if (item.hiddenKey) {
        status = form[item.hiddenKey] === item.hiddenValue
      } else if (item.hiddenKeys && item.hiddenKeys instanceof Array) {
        item.hiddenKeys.forEach((v, i) => {
          if (form[v] !== item.hiddenValues[i]) {
            status = false
          }
        })
      } else if (item.hidden instanceof Function) {
        status = item.hidden(form)
      } else if (item.hiddenFunc instanceof Function) {
        status = item.hiddenFunc(form)
      }
      return status
    },
    getOptions (item) {
      const { options } = item || {}
      if (options instanceof Array) {
        return options
      } else if (options instanceof String && this[options] instanceof Array) {
        return this[options]
      } else {
        return []
      }
    },
    handleChangeCascader () {
      this.$refs.cascader[0].dropDownVisible = false
    }
  }
}
</script>

<style lang="scss">
  /* 图片放大预览*/
  .transparent {
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important; }
  .transparent .el-dialog__headerbtn {
    right: 0 !important;
    top: -23px !important; }

  .image-preview-dialog.el-dialog__wrapper .el-dialog {
    background: transparent;
    max-height: 90%;
    width: auto !important;
    height: auto !important;
    margin: 50px auto 0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .image-preview-dialog.el-dialog__wrapper .el-dialog .el-dialog__header {
    padding: 0; }
  .image-preview-dialog.el-dialog__wrapper .el-dialog .el-dialog__header .el-dialog__headerbtn {
    z-index: 1;
    top: 0;
    right: 0; }
  .image-preview-dialog.el-dialog__wrapper .el-dialog .el-dialog__body {
    margin-bottom: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto; }
  .image-preview-dialog.el-dialog__wrapper .el-dialog .el-dialog__body .t-img {
    max-height: 750px; }

  .z-tip {
    font-size: 12px;
    color: #999999;
    white-space: nowrap;
  }

  .z-tip-form-item{
    font-size: 12px;
    color: #999999;
    word-break: break-all;
    // white-space: ;
    line-height: 1.5;
    padding-top: 10px;
    margin: -5px 0;
  }

  .z-input-line.el-input.el-input--small {
    .el-input__inner {
      padding: 0;
      border-width: 0 0 1px 0;
      border-radius: 0;
    }
  }

  .z-image-uploader,
  .z-video-uploader {
    .el-upload {
      display: block!important;
      border: 1px dashed #E2E2E2;
      background-color: #ffffff;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .text-wrap {
      width: 138px;
      height: 138px;
      text-align: center;
      .icon{
        font-size: 40px;
        color: #ccc;
        margin-top: 10px;
      }
      .jee-svg-icon {
        fill: #B3B3B3;
        font-size: 30px;
        padding-top: 38px;
        padding-bottom: 15px;
        display: block;
        margin: 0 auto;
      }
      .text {
        font-size: 12px;
        line-height: 22px;
        color: #666666;
        &:not(:first-of-type) {
          color: #666666;
        }
      }
    }
    .image {
      width: 140px;
      height: 140px;
      display: block;
    }
  }

  .z-video-uploader {
    .el-upload {
      max-width: 414px;
      width: 100%;
      .el-upload-dragger {
        width: 100%;
        height: 91px;
        border: 0;
      }
    }
    .text-wrap {
      width: 100%;
      height: auto;
      .jee-svg-icon {
        font-size: 33px;
        padding-top: 20px;
        padding-bottom: 5px;
      }
      .text {
        span {
          color: #ff7373;
        }
      }
    }
  }

  .z-checkbox-single{
    .el-checkbox {
      .el-checkbox__inner {
        border-radius: 50%;
      }
    }
    &.default{
      .el-checkbox {
        .el-checkbox__inner {
          border-radius: 2px;
        }
      }
    }
  }


  .z-checkbox-group.el-checkbox-group {
    height: auto!important;
    .el-checkbox {
      align-items: center;
    }
    .z-checkbox-medium {
      height: 40px;
    }
    .z-checkbox-small {
      height: 32px;
    }
  }

  // 模型预览
  .z-draggable-preview {
    >.el-form-item {
      padding: 15px 20px;
      margin-bottom: 0!important;
      display: flex;
      .el-form-item__content{
        flex: 1;
        margin-left: 0 !important;
      }
      .el-form-item__label{
        float: none;
      }
      .el-select,
      .el-cascader {
        max-width: 414px;
      }
      .el-select,
      .el-cascader {
        width: 100%;
      }
      .el-input,.el-textarea{
        max-width: 414px;
      }
      .btn-extend {
        display: block;
        margin-top: 30px;
      }
      .radio-other-option {
        white-space: initial;
        word-wrap:break-word;
        word-break:normal;
        align-items: baseline;
        margin-top: 0px;
        .el-radio__label,
        .el-checkbox__label {
          // line-height: 32px !important;
          .el-form-item {
            margin: 0!important;
            display: inline-block;
            .t-inline{
              vertical-align: top;
            }
          }
        }
      }
    }
  }

  // 模型编辑
  .z-draggable-editor,.s-draggable-editor {
    .option-wrap,
    .el-form-item.size-wrap {
      // margin-left: 12px; // 选项和文件大小掉行了
      margin-bottom: 0!important;
      // .el-input-group{
      //     margin-top: 2px;
      // }
    }
    .rule-item,
    .rule-item-length {
      display: flex;
      align-items: center;
    }
    .rule-item {
      flex-wrap: wrap;
      line-height: 32px;
      .el-checkbox {
        padding-right: 20px;
        line-height: 1;
        padding: 0 0 5px;
      }
      .rule-item-length {
        flex: 1;
        padding-bottom: 25px;
        .el-form-item__content {
          line-height: 32px;
        }
        .el-form-item {
          flex: 1;
          .el-input-number {
            width: 100%;
            min-width: 100px;
          }
          .z-append-text {
            position: absolute;
            left: 0;
            top: 100%;
          }
          .el-form-item__error {
            top: 32px;
          }
        }
      }
      .rule-item-input {
        flex: 1;
        min-width: 100%;
      }
    }
    .address-wrap{
      .option-item {
        padding-bottom: 10px;
        background-color: #fff;
        line-height: 32px;
      }
    }
    .option-wrap {
      .ghost {
        border: 1px dashed #1EC6DF;
      }
      .el-checkbox-group{
        margin-bottom: 0;
      }
      .option-item {
        padding-bottom: 5px;
        background-color: #fff;
        line-height: 32px;
        &.new-cont-option{
          padding-bottom: 10px;
          .el-radio{
            margin-right: 0;
          }
        }
        .el-checkbox{
          margin-right: 0;
          .el-checkbox__input{
            margin-top: 10px;
          }
        }
        .el-radio__label,
        .el-checkbox__label {
          display: inline-block;
          .option-radio {
            display: flex;
            align-items: center;
            justify-content: start;
            // justify-content: space-between;
            .jee-svg-icon {
              width: 16px;
              font-size: 16px;
              fill: #787878;
              padding-left: 10px;
              &.move {
                cursor: move;
              }
            }
            .flex{
              margin-left: 0px;
              display:flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              & >svg {
                fill: #787878;
                cursor: pointer;
              }
            }
          }
        }
        .el-radio__label {
          .option-radio {
            .move {
              padding-right: 20px;
            }
          }
        }
        &.el-select{
          padding-top: 5px;
        }
        &.el-input{
          padding-top: 5px;
        }
        &.ghost {
          position: relative;
          line-height: 32px;
          list-style: none;
          font-size: 0;
          &::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            z-index: 10;
          }
        }
      }
      .el-radio-group {
        width: 100%;
        margin-top: 6px;
        .el-radio {
          width: 100%;
          .el-radio__label {
            width: 100%;
            box-sizing: border-box;
          }
        }
      }
      .el-checkbox-group .widget-form-list {
        width: 100%;
        .el-checkbox__label {
          width: 100%;
        }
      }
      .btn-add {
        width: 100%;
        margin-bottom: 30px;
        height: 40px;
        .jee-svg-icon {
          padding-right: 10px;
        }
      }
      .other-option-wrap {
        .other-option {
          // padding-left: 20px;
          .el-input {
            margin: 8px 0;
            // max-width: 212px;
            line-height: 35px;
          }
        }
        .el-checkbox {
          display: block;
          line-height: 20px;
        }
      }
    }
  }
.dialog-form-container{
  .el-form{
    .form-item-wrap{
      padding: 0 20px 0 40px;
      .el-form-item {
        width: 100%;
        margin-bottom: 20px!important;
      }
      &:not(:first-of-type):last-of-type .el-form-item{
        margin-bottom: 0!important;
      }
    }
  }
  .el-input,
  .el-textarea,
  .el-cascader,
  .el-select {
    max-width: 300px;
    width: 100%;
  }
  .el-switch{
    height: 16px;
    margin-top: -2px;
  }
  .switch-text{
    margin-left: 10px;
    font-size: 12px;
  }
  .el-textarea .el-textarea__inner{
    min-height: 32px !important;
    height: inherit !important;
  }
  .check-share{
    padding: 5px 10px;
    color: #666;
    font-size: 14px;
    .check-share-label{
      margin-bottom: 10px;
      padding-left: 20px;
      .jee-svg-icon{
        fill:#666;
        position: relative;
        top: 0.5px;
        margin-right: 5px;
      }
    }
    .check-share-title{
      color: #333;
      font-size: 16px;
      line-height: 1;
      margin-right: 70px;
      position: relative;
      top: 2px;
    }
    .el-checkbox-group{
      min-height: 40px;
      height: inherit;
      padding: 12px 20px;
      box-sizing: border-box;
      border: 1px dashed #E8E8E8;
      .el-checkbox{
        min-width: 65.3px;
        .el-checkbox__inner{
          border-radius: 100%;
          line-height: 1.3;
        }
        .el-checkbox__label{
          line-height: 1.3;
        }
      }
    }
  }
  .tag-wrap{
    // padding: 0 30px;
    .tree-box-label{
      margin-bottom: 20px;
      display: block;
    }
    .tree-box{
      overflow-x: hidden;
      overflow-y: overlay;
      width: 100%;
      height: 330px;
      padding-top: 10px;
      box-sizing: border-box;
      border: 1px solid #e8e8e8;
      .el-tree{
        background-color: #fff;
      }
      .right-radio{
        display: inline-block;
        position: absolute;
        right: 30px;
        .el-radio__label{
          display: none;
        }
        .el-checkbox__inner{
          border-radius: 100%;
        }
      }
    }
    .label-box{
      min-height: 40px;
      width: 100%;
      box-sizing: border-box;
      border: 1px dashed #E8E8E8;
      margin-bottom: 20px;
      padding: 9px 0 0 20px;
      .tag-item{
        height: 22px;
        line-height: 20px;
        margin-bottom: 9px;
        margin-right: 20px;
        font-size: 12px;
        .el-tag__close{
          color: #999;
          &:hover{
            background-color: transparent;
          }
        }
      }
    }
  }
  .careful-txt{
    color: #666666;
    padding: 0 15px;
    font-size:14px;
    font-weight: 400;
    line-height:28px;
    margin-bottom: 30px;
    .careful-label{
      color: #FF0000;
    }
  }
  .el-upload-list .el-upload-list__item{
    position: absolute;
    line-height: 32px;
    top: 64px;
    width: 300px;
    box-sizing: border-box;
    border: 1px solid #E8E8E8;
    margin-bottom: 10px;
    padding: 0 15px;
    .el-icon-close{
      top: 10px;
    }
  }
  .check-tree-wrap{
    overflow: overlay;
    width: 300px;
    height: 180px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 10px 0;
  }
  .place-txt{
    padding-left: 100px;
  }
}
</style>
